<template>
  <div>
    <el-card class="box-card">
      <template #header>
        入库单详情
      </template>
      <el-form :model="info" class="grids columnsLine4">
        <el-form-item label="入库单">
          {{info.inStoreSn}}
        </el-form-item>
        <el-form-item label="计划入库日期">
          {{info.planDate}}
        </el-form-item>
        <el-form-item label="入库类型">
          {{counter.idString_format("receiptType",info.type)}}
        </el-form-item>
        <el-form-item label="供应商">
          {{info.supplierName}}
        </el-form-item>
        <el-form-item label="总重量(KG)">
          {{info.totalWeight}}
        </el-form-item>
        <el-form-item label="总体积(m³)">
          {{info.totalSize}}
        </el-form-item>
        <el-form-item label="状态">
          {{counter.idString_format("inWarehouseStatus",info.status)}}
        </el-form-item>
        <el-form-item label="创建人">
          {{info.createBy}}
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <el-form :model="formInline" class="grids columnsLine4">
          <el-form-item label="货物编码">
            <el-input v-model="formInline.cargoSn" placeholder="请输入货物编码" clearable />
          </el-form-item>
          <el-form-item label="货物名称">
            <el-input v-model="formInline.cargoName" placeholder="请输入货物名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="init">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <div class="actionBtn">
        <el-button type="primary" @click="proxy.$refs.selectPlanCargoCom.open(info.inPlanId,id)">新增货物</el-button>
        <el-button type="primary" plain @click="save" :loading="loading">批量保存</el-button>
        <el-button type="danger" plain :disabled="!multipleSelection.length" @click="batchDel">批量删除</el-button>
      </div>
      <el-table :data="tableData.rows" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="50" />
        <el-table-column prop="batchNumber" label="批次号" align="center" min-width="150" />
        <el-table-column prop="cargoSn" label="货物编码" align="center" width="200" />
        <el-table-column prop="cargoName" label="货物名称" />
        <el-table-column prop="address" label="单价" min-width="150" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.unitPrice" placeholder="单价" min-width="150" align="center" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="数量" min-width="150" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.num" placeholder="数量" />
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template #default="scope">
            {{(scope.row.num*scope.row.unitPrice)||0}}
          </template>
        </el-table-column>
        <el-table-column label="货物属性" min-width="150" align="center">
          <template #default="scope">
            <el-select v-model="scope.row.type" placeholder="请选择">
              <el-option label="良品" :value="1" />
              <el-option label="不良品" :value="2" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="托盘码" min-width="200" align="center">
          <template #default="scope">
            <selectTray v-model="scope.row.trayId"></selectTray>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template #default="scope">
            <selectUnit v-model="scope.row.cargoUnit" readonly="1"></selectUnit>
          </template>
        </el-table-column>
        <el-table-column label="工厂" min-width="150" align="center">
          <template #default="scope">
            <selectFactory v-model="scope.row.factoryId"></selectFactory>
          </template>
        </el-table-column>
        <el-table-column min-width="150" align="center" label="仓库">
          <template #default="scope">
            <selectStores v-model="scope.row.storeId" :factoryId="scope.row.factoryId"></selectStores>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="库区" min-width="150" align="center">
          <template #default="scope">
            <selectStoreRegion v-model="scope.row.storeRegionId" :factoryId="scope.row.factoryId" :storeId="scope.row.storeId"></selectStoreRegion>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="库位" min-width="200" align="center">
          <template #default="scope">
            <selectStoreLocation v-model="scope.row.storeRegionLocationId" :factoryId="scope.row.factoryId" :storeId="scope.row.storeId" :storeRegionId="scope.row.storeRegionId"></selectStoreLocation>
          </template>
        </el-table-column>
        <el-table-column prop="cargoSpec" label="规格" min-width="200" align="center" />
        <el-table-column prop="address" label="货物有效期" min-width="200" align="center">
          <template #default="scope">
            <DatePicker v-model="scope.row.validityDate"></DatePicker>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="100" fixed="right" align="center">
          <template #default="scope">
            <el-button type="danger" icon="Delete" circle @click="delHw(scope.row)" />
          </template>
        </el-table-column>
      </el-table>

      <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getData" />
    </el-card>

    <!-- 新增货物 -->
    <selectPlanCargo ref="selectPlanCargoCom" @fatherMethods="loadData"></selectPlanCargo>
  </div>
</template>

<script setup lang="ts">
import selectPlanCargo from "@/views/inWarehouse/components/selectPlanCargo.vue";
const { proxy } = getCurrentInstance();
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();

//data
let loading = ref(false);
let info = ref({});
let form = ref({});
let tableData = ref({});
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  cargoSn: "",
  cargoName: "",
  inWarehousId: "",
});
let multipleSelection = ref([]); //选中的数组

//生命周期
let id = computed(() => {
  return route.query.id;
});
onMounted(() => {
  loadData();
});

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
let loadData = () => {
  getInfo();
  init();
};
let getInfo = async () => {
  let { data } = await proxy.$apis.inWarehousDetail({ id: id.value });
  info.value = data;
};
let getData = async () => {
  formInline.value.inWarehousId = id.value;
  tableData.value = await proxy.$apis.inWarehousDetailList(formInline.value);
};
let search = () => {
  formInline.value.pageNum = 1;
  getData();
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    cargoSn: "",
    cargoName: "",
    inWarehousId: "",
  };
  getData();
};
let delHw = async (row) => {
  let resp = await proxy.$utils.confirmTips(`是否确定删除?`);
  if (!resp) return;
  await delFunc(row);
  proxy.$utils.showToast("删除成功");
  init();
};
let delFunc = async (row) => {
  await proxy.$apis.inWarehousDetailRemove({ id: row.id });
};
let batchDel = async () => {
  let resp = await proxy.$utils.confirmTips(`是否确定批量删除?`);
  if (!resp) return;
  for (let index = 0; index < multipleSelection.value.length; index++) {
    const element = multipleSelection.value[index];
    await delFunc(element);
  }
  proxy.$utils.showToast("删除成功");
  init();
};
let save = async () => {
  try {
    loading.value = true;
    let list = [];
    if (multipleSelection.value.length) {
      list = [...multipleSelection.value];
    } else {
      list = [...tableData.value.rows];
    }
    for (let index = 0; index < list.length; index++) {
      const element = list[index];
      let addForm = {
        id: "",
        batchNumber: "",
        cargoId: "",
        cargoSn: "",
        cargoName: "",
        unitPrice: "",
        num: "",
        type: "",
        cargoUnit: "",
        factoryId: "",
        storeId: "",
        storeRegionId: "",
        storeRegionLocationId: "",
        trayId: "",
        cargoSpec: "",
        validityDate: "",
        inWarehousId: "",
      };
      let query = proxy.$utils.formatFunction(element, { ...addForm });
      await proxy.$apis.inWarehousDetailEdit(query);
    }
    proxy.$utils.showToast("修改成功");
    init();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
  .el-form-item {
    margin-bottom: 0;
  }
  .actionBtn {
    margin-bottom: 15px;
  }
}
</style>
